<template>
  <view
    v-if="!isAllBtn"
    class="checkbox flex"
    :class="[checked ? 'active' : '']"
    @tap="handleClick(data)">
    <uni-icons v-if="checked" type="checkmarkempty" color="#fff" size="14" />
  </view>
  <view
    v-else
    class="checkbox flex"
    :class="[exist_checked ? 'active' : '', allchecked ? 'active' : '']"
    @tap="handleClick(data)">
    <uni-icons v-if="allchecked" type="checkmarkempty" color="#fff" size="14" />
    <view v-if="exist_checked" class="exist_checked"></view>
  </view>
</template>

<script lang="ts" setup>
import { onShow } from "@dcloudio/uni-app";

const props = defineProps({
  allchecked: {
    type: Boolean,
    default: false,
  },
  checked: {
    type: Boolean,
    default: false,
  },
  isAllBtn: {
    type: Boolean,
    default: false,
  },
  data: { type: Object, default: () => ({}) },
  exist_checked: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["handleClick"]);
const handleClick = () => {
  // TODO: 点击事件
};
</script>

<style lang="scss" scoped>
.checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #d8dde9;
  border-radius: 2px;
  background: #ffffff;
  justify-content: center;
  &.active {
    background: #aed8c8;
    border-color: #aed8c8;
  }
  .exist_checked {
    width: 10px;
    border: 1px solid #fff;
  }
}
</style>
